<template>
	<div id="help">
		<transition :name="pageAnimationName">
	    	<router-view></router-view>
	    </transition>
	</div>
</template>

<script>


export default {
	data () {
		return {
			pageAnimationName: '',
		}
	},
	watch: {
		'$route' (to, from) {
			const toDepth = to.path.split('/').length;
    		const fromDepth = from.path.split('/').length;
    		if (toDepth < fromDepth) {
    			this.pageAnimationName = 'page-left';
    		} else if (toDepth > fromDepth) {
    			this.pageAnimationName = 'page-right';
    		} else {
    			this.pageAnimationName = 'page';
    		}
		}
	}
}
</script>